
import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';

import 'group_stack_chart.dart';

class DashboardPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return DashboardPageState();
  }
  
}

class DashboardPageState extends State{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: new Text('仪表盘')
      ),
      body: Container(
        padding: const EdgeInsets.only(left:16,right:16,top:32),
        child: Column(
          children: <Widget>[
            Container(
              height: 200,
              child: PageView(
                controller: PageController(viewportFraction:0.8),
                scrollDirection: Axis.horizontal,
                pageSnapping: true,
                children: <Widget>[
                  Container(
                    margin: const EdgeInsets.symmetric(horizontal:8),
                    color: Colors.redAccent,
                    width: 100,
                    child: Echarts(
                      option: '''
                      {
                        xAxis: {
                          type: 'category',
                          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                          type: 'value'
                        },
                        series: [{
                          data: [820, 932, 901, 934, 1290, 1330, 1320],
                          type: 'line'
                        }]
                      }
                      ''' 
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.symmetric(horizontal:8),
                    color: Colors.blueAccent,
                    width: 100,
                    child: new GroupedStackedBarChart(GroupedStackedBarChart.createSampleData())
                  ),
                  Container(
                    margin: const EdgeInsets.symmetric(horizontal:8),
                    color: Colors.greenAccent,
                    width: 100,
                  )
                ],
              ),
            )
          ]
        ),
      ),
    );
  }
  
}